<script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const go = ref<string>('');
const router = useRouter();
const redirect = ref<string>('/pages/index/index'); // 默认跳转首页

onLoad((query) => {
  go.value = query?.go || '您访问的';
  redirect.value = query?.redirect || '/pages/index/index';
});

/**
 * 返回首页
 */
function backHome() {
  router.pushTab(redirect.value);
}

/**
 * 返回上一页
 */
function goBack() {
  uni.navigateBack();
}
</script>

<template>
  <view class="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col items-center justify-center px-8">
    <!-- 404插画 -->
    <image
      class="w-64 h-64 mb-8 animate-bounce"
      mode="aspectFit"
      src="/static/images/404-illustration.png"
    />

    <!-- 主标题 -->
    <view class="text-4xl font-bold text-gray-800 mb-2">
      404
    </view>

    <!-- 副标题 -->
    <view class="text-lg text-gray-600 mb-6 text-center">
      {{ go || '您访问的' }}页面找不到了~
    </view>

    <!-- 描述文字 -->
    <view class="text-sm text-gray-500 mb-8 text-center">
      可能页面已被移除或您输入了错误的地址
    </view>

    <!-- 操作按钮组 -->
    <view class="flex flex-col w-full max-w-xs space-y-4">
      <BasicButton
        type="primary"
        size="large"
        class="shadow-md"
        @click="backHome"
      >
        <template #icon>
          <uni-icons type="home" size="18" color="#fff" class="mr-2" />
        </template>
        返回首页
      </BasicButton>

      <BasicButton
        type="default"
        size="large"
        @click="goBack"
      >
        <template #icon>
          <uni-icons type="back" size="18" color="#666" class="mr-2" />
        </template>
        返回上一页
      </BasicButton>
    </view>

    <!-- 底部装饰 -->
    <view class="absolute bottom-8 text-xs text-gray-400">
      遇到问题？请联系客服
    </view>
  </view>
</template>

<style lang="scss" scoped>
.animate-bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
}
</style>
